<template>  
    <el-main>
    
        <el-form :model="HouseForm" size="mini" label-width="80px">
            <el-row label="名称">
                <el-col :span="6">
                    <el-form-item label="编号" >
                        <el-input v-model="HouseForm.HouseId" placeholder="请输入房屋编号..." @keyup.enter.native="onSearch"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="1">
                <el-button class="searchBtn"  size="mini" icon="el-icon-search" style="margin-left:0">查询</el-button>
                </el-col>   
                <el-button @click="AddHouse" class="newBtn" type="primary" size="mini" icon="el-icon-circle-plus" style="margin-right:-750px">添加房屋信息</el-button>
            
            </el-row>
        </el-form>
       
        <el-table ref="HouseTable" size="mini" :data="tableData" :height="tableHeight" border style="width: 100%" >
         <el-table-column type="selection"></el-table-column>
            <el-table-column prop="HouseId" label="房屋编号" ></el-table-column>
            <el-table-column prop="OwnerName" label="业主姓名" ></el-table-column>
            <el-table-column prop="BuildId" label="楼号"></el-table-column>
            <el-table-column prop="RoomId" label="房间号"></el-table-column>
            <el-table-column prop="HouseStyle" label="房型"></el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="HouseDetail(scope.$index,scope.row)" size="mini" style="margin-left:-5px">详情</el-button>
                    <el-button @click.native.prevent="EditHouse(scope.$index,scope.row)" size="mini" style="margin-left:-5px">修改</el-button>
                    <el-button @click.native.prevent="deleteRow(scope.$index,tableData)" size="mini" style="margin-left:-5px">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="this.tableData.length">
        </el-pagination>
        <!-- 新增对话框-->
        <el-dialog title="修改房屋信息" :visible.sync="visible1" width="30%" align="center" >
            <el-form ref="EditHouse" :model="EditHouseForm" :inline="true" style="margin-bottom:-10px">
                <el-form-item prop="HouseId" label="房屋编号" label-width="130px" style="margin-right:60px">
                    <el-input v-model="EditHouseForm.HouseId" placeholder="房屋编号" disabled></el-input>
                </el-form-item>
                <el-form-item prop="BuildId" label="楼号" label-width="130px" style="margin-right:60px">
                    <el-input v-model="EditHouseForm.BuildId" placeholder="楼号" ></el-input>
                </el-form-item>
                <el-form-item prop="RoomId" label="房间号" label-width="130px" style="margin-right:60px">
                    <el-input v-model="EditHouseForm.RoomId" placeholder="房间号" ></el-input>
                </el-form-item>
                <el-form-item prop="HouseStyle" label="房型" label-width="130px" style="margin-right:60px">
                    <el-input v-model="EditHouseForm.HouseStyle" placeholder="房型" ></el-input>
                </el-form-item>
                <el-form-item prop="OwnerName" label="业主姓名" label-width="130px" style="margin-right:60px">
                    <el-input v-model="EditHouseForm.OwnerName" placeholder="业主姓名" ></el-input>
                </el-form-item>
            
            <el-form-item style="margin-top:10px ">
                <el-button @click="visible1=false" style="margin-right:50px" size="large">取 消</el-button>
                <el-button type="primary" @click="visible1= false" size="large" style="margin-right:-50px">确 定</el-button>
            </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="添加房屋信息" :visible.sync="visible" width="30%" align="center" >
            <el-form ref="AddHouse" :model="AddHouseForm" :inline="true" style="margin-bottom:-10px">
                <el-form-item prop="HouseId" label="房屋编号" label-width="130px" style="margin-right:60px">
                    <el-input v-model="AddHouseForm.HouseId" placeholder="房屋编号" ></el-input>
                </el-form-item>
                <el-form-item prop="BuildId" label="楼号" label-width="130px" style="margin-right:60px">
                    <el-input v-model="AddHouseForm.BuildId" placeholder="楼号" ></el-input>
                </el-form-item>
                <el-form-item prop="RoomId" label="房间号" label-width="130px" style="margin-right:60px">
                    <el-input v-model="AddHouseForm.RoomId" placeholder="房间号" ></el-input>
                </el-form-item>
                <el-form-item prop="HouseStyle" label="房型" label-width="130px" style="margin-right:60px">
                    <el-input v-model="AddHouseForm.HouseStyle" placeholder="房型" ></el-input>
                </el-form-item>
                <el-form-item prop="OwnerName" label="业主姓名" label-width="130px" style="margin-right:60px">
                    <el-input v-model="AddHouseForm.OwnerName" placeholder="业主姓名" ></el-input>
                </el-form-item>
            
            <el-form-item style="margin-top:10px ">
                <el-button @click="visible=false" style="margin-right:50px" size="large">取 消</el-button>
                <el-button type="primary" @click="visible= false" size="large" style="margin-right:-50px">确 定</el-button>
            </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="房屋信息详情" :visible.sync="visible2" width="30%" align="center" >
            <el-form ref="HouseDetail" :model="HouseDetailForm" :inline="true" style="margin-bottom:-10px">
                <el-form-item prop="HouseId" label="房屋编号" label-width="130px" style="margin-right:60px">
                    <el-input v-model="HouseDetailForm.HouseId" placeholder="房屋编号" disabled></el-input>
                </el-form-item>
                <el-form-item prop="BuildId" label="楼号" label-width="130px" style="margin-right:60px">
                    <el-input v-model="HouseDetailForm.BuildId" placeholder="楼号" disabled></el-input>
                </el-form-item>
                <el-form-item prop="RoomId" label="房间号" label-width="130px" style="margin-right:60px">
                    <el-input v-model="HouseDetailForm.RoomId" placeholder="房间号" disabled></el-input>
                </el-form-item>
                <el-form-item prop="HouseStyle" label="房型" label-width="130px" style="margin-right:60px">
                    <el-input v-model="HouseDetailForm.HouseStyle" placeholder="房型" disabled></el-input>
                </el-form-item>
                <el-form-item prop="OwnerName" label="业主姓名" label-width="130px" style="margin-right:60px">
                    <el-input v-model="HouseDetailForm.OwnerName" placeholder="业主姓名" disabled></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-main>
</template>
<script>
export default {
    data(){
        
        return{
            currentPage:1,
            pageSize:10,
           
            HouseForm:{
                HouseId:""
            },
            tableHeight: window.innerHeight,
            tableData:[
                {
                    HouseId: "00000001",
                    OwnerName: "kami",
                    BuildId: "A1",
                    RoomId:"101",
                    HouseStyle:"公寓式住宅"
                },
                {
                    HouseId: "00000001",
                    OwnerName: "kami",
                    BuildId: "A1",
                    RoomId:"101",
                    HouseStyle:"公寓式住宅"
                },
            ],
            HouseDetailForm:{
                    HouseId: "",
                    OwnerName: "",
                    BuildId: "",
                    RoomId:"",
                    HouseStyle:""
            },
            visible:false,
            visible1:false,
            visible2:false,
            addUserForm:{
                userName:' ',
                address:' ',
            },
            AddHouseForm:{
                    HouseId: "",
                    OwnerName: "",
                    BuildId: "",
                    RoomId:"",
                    HouseStyle:""
            },
            EditHouseForm:{
                    HouseId: "",
                    OwnerName: "",
                    BuildId: "",
                    RoomId:"",
                    HouseStyle:""
            },
            rules:{
                userName:[
                {
                    required:true,
                    trigger: "change",
                    message: "请输入用户名"
                }
                ],
                address: [
                {
                    required: true,
                    trigger: "change",
                    message: "请输入地址"
                }
                ]
            }
        };
    },methods:{
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val){
            console.log(`当前页: ${val}`);
        },
handleSelectionChange(val){
    console.log(val)
},
        //添加房屋信息
        AddHouse(){
            //调用表单清空方法
            this.resetForm('AddHouse');
            this.visible=true;
        },
        //编辑房屋信息
        EditHouse(index,row){
            this.visible1=true;
            this.EditHouseForm=Object.assign({},row);
        },
        HouseDetail(index,row){
            this.visible2=true;
            this.HouseDetailForm=Object.assign({},row);
        },
        //删除用户
        deleteUser(row){
            console.log(row);
        },
        //清空表单数据
        resetForm(formName){
            if(this.$refs[formName]){
                this.$refs[formName].resetFields();
            }
        },
        comfirmBtn(){
            let _this=this;
            _this.$refs.addUser.validate(valid=>{
                if(valid){
                    _this.visible=false;
                }
            })
        },
    },
    
    
    //该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题
// 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，
// 这个操作都应该放进Vue.nextTick()的回调函数中
    mounted() {
        this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 200; //后面的50：根据需求空出的高度，自行调整
        });
    }
};
</script>
<style lang="scss" scoped>
.searchBtn{
    margin-left: 30px;
}
.el-main{
    padding-top: 5px !important;
}
</style>